<template>
  <div>
    <div ref="echarts" style="width: 600px; height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

var base = +new Date(1968, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];
var data = [];

for (var i = 1; i < 100; i++) {
  var now = new Date(base += oneDay);
  date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-'));
  data.push(Math.round((Math.random() - 0.5) * 20));
}

export default {
  name: 'EChartsComponent',
  data () {
    return {
      myChart: undefined
    }
  },
  mounted () {
    this.myChart = echarts.init(this.$refs.echarts)
    this.myChart.setOption({
      title: {
        text: '折线图'
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: date
      },
      dataZoom: [{
        // inside 使用滚轮控制  slider
        type: 'slider',
        // 数据窗口范围的起始
        start: 0,
        end: 10,
        width: '100%',
        height: '20',
        right: '10%',
        left: '5%',
        bottom: '10px',
        dataBackground: {
          // 数据阴影的样式。
          lineStyle: 'mylineStyle',
          // 阴影的线条样式
          areaStyle: 'myareaStyle',
          // 阴影的填充样式
        },
        // 设置背景颜色
        backgroundColor: "rgb(19, 63, 100)",
        // 设置选中范围的填充颜色
        fillerColor: "rgb(16, 171, 198)",
        // 是否显示detail，即拖拽时候显示详细数值信息
        showDetail: true,
        orient: 'horizontal',
        borderColor: "#ddd",
      }],
      yAxis: {},
      series: [
        {
          name: '储量',
          type: 'line',
          data: data
        }
      ]
    })
  }
}
</script>
<style lang="scss" scoped></style>
